<template>
  <el-dialog
    title="选择负责人"
    @close="openClose"
    :visible.sync="dialogVisible"
    width="50%"
  >
    <div class="usered">
      <el-tree
        ref="tree"
        :data="treeData"
        :props="defaultProps"
        accordion
        @node-click="nodeClick"
        node-key="id"
        :default-expanded-keys="[1]"

      ></el-tree>
      <div class="table-box" style="width: 70%">
        <div class="table-big-box">
          <el-table :data="list" height="350" border style="width: 100%">
            <el-table-column prop="username" label="用户名" align="center">
            </el-table-column>
            <el-table-column prop="deptName" label="所属部门" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="selectUser(scope.row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <pagination
          v-show="page.total > 0"
          :total="page.total"
          :page.sync="page.currentPage"
          :limit.sync="page.pageSize"
          @pagination="getListUser"
        />
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { fetchTree } from "@/api/admin/dept";
import { fetchList } from "@/api/admin/user";

export default {
  name: "SelectliableUser",
  data() {
    return {
      dialogVisible: false,
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      list: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条,
      },
    };
  },
  mounted() {
    fetchTree().then((response) => {
      this.treeData = response.data.data;
      this.getListUser(this.page, { deptId: this.treeData[0].id });
    });
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    openClose() {
      //父组件修改子组件的值
      this.$emit("update:changeidentityDia", false);
    },
    nodeClick(data) {
      this.page.page = 1;
      this.getListUser(this.page, { deptId: data.id });
    },
    selectUser(row) {
      this.$emit("closeSelect", row);
    },
    getListUser(page, params) {
      fetchList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
          },
          params
        )
      ).then((response) => {
        this.list = response.data.data.records;
        this.page.total = response.data.data.total;
      });
    },
  },
};
</script>
<style lang="scss" >
.usered {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .el-dialog__body {
    height: 80vh;
  }
  .table-box {
    height: 100%;
    .table-big-box {
      overflow: auto;
      height: 80%;
    }
  }
}
</style>